<template>
  <div class="Cart">
    <ul>
      <li v-for="(item, index) in cartList"
          :key="index"
          v-show="cartList.length">
        <div class="content">
          <img :src="item.image"
               alt="">
          <span class="goods">{{item.title}}</span>
        </div>
        <div>
          <i class="cubeic-remove"
             @click="reduce(index)"></i>
          {{item.cartCount}}
          <i class="cubeic-add"
             @click="add(index)"></i>
        </div>
      </li>
    </ul>
    <cube-button class="order">下单</cube-button>
    <cube-button @click="emptyCartArray">清空</cube-button>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {

    }
  },
  methods: {
    reduce (index) {
      this.cartRemove(index)
    },
    add (index) {
      this.cartAdd(index)
    },
    ...mapMutations(['cartRemove', 'cartAdd', 'emptyCartArray'])
  },
  computed: {
    ...mapGetters({ cartList: 'getCartArray' })
  },
  created () {
    console.log(this.$route)
  }
}
</script>
<style lang="scss" scoped>
.Cart {
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 50%;
      }
      span {
        font-size: 15px;
      }
      i {
        font-size: 20px;
      }
    }
  }
  .order {
    margin: 20px 0;
  }
}
</style>
